<template>
  <label class="cl-radio" :class="{'is-disabled': isDisabled}">
    <span class=“cl-radio__inner></span>
    <input type="radio" class="cl-radio__original" :disabled="isDisabled" :checked="isChecked" @click="handleClick"/>
    <span class="cl-radio__label"><slot></slot></span>
  </label>
</template>

<script>
export default {
  name: 'Radio',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: [String, Number],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isDisabled () {
      return this.disabled
    },
    model: {
      get () {
        return this.value;
      },
      set (val) {
        this.$emit('input', val);
      }
    },
    isChecked () {
      return this.model === this.label
    }
  },
  methods: {
    handleClick () {
      this.model = this.label
    }
  }
}
</script>

<style lang="scss">
@mixin appearance($value) {
  -o-appearance: $value;
  -moz-appearance: $value;
  -webkit-appearance: $value;
  box-shadow: $value;
}

.cl-radio {
  cursor: pointer;
  &.is-disabled {
    cursor: no-drop;
  }
}
.cl-radio__original {
  @include appearance(none);
  width: 12px;
  height: 12px;
  margin: 0;
  vertical-align: middle;
  border: 1px solid #C3C6D6;
  border-radius: 6px;
  outline: none;
  &:checked {
    border-color: #3083F2;
    &::after {
      display: block;
      content: '\263B';
      color: #3083F2;
      line-height: 10px;
      text-align: center;
      transform: scale(.8);
    }
  }
}

.is-disabled .cl-radio__original {
  border-color: #aaa !important;
  background-color: #fff !important;
  &:checked::after {
    color: #aaa;
  }
}

.cl-radio__label {
  vertical-align: middle;
  color: #4B4F58;
  font-size: 14px;
  line-height: 20px;
}
</style>
